<!--
 * @Author: 宋杰
 * @Date: 2021-01-08 10:47:51
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-10 18:58:40
 * @Description: 一家十一口(猜一字) 中间 中国地图
-->
<template>
  <div class="div1">
    <div
      class="map-container"
      ref="myEchart2"
      style="width:100%;height:100%"
    ></div>
  </div>
</template>

<script>
import "../../../node_modules/echarts/map/js/china"; // 引入中国地图数据
export default {
  name: "",
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.Myecharts();
  },
  //方法集合
  methods: {
    Myecharts() {
      this.myEchart = this.$echarts.init(this.$refs.myEchart2);
      var dataValue = this.dealWithData();
      var formatterData = `{c}(人)\n{b}`;
      var option = {
        tooltip: {
          show: true,
          borderWidth: 1, //设置外层边框
          borderColor: "#555555",
          backgroundColor: `rgba(255,255,255,1)`,
          textStyle: {
            color: "#555555",
          },
        },
        legend: {
          show: false,
        },
        geo: {
          map: "china",
          roam: false, // 一定要关闭拖拽
          zoom: 1.23,
          center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show: false, //省份名展示
              // fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              // areaColor: "#184cff",
              borderColor: "#555555",
              borderWidth: 1, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: "#01012a",
            },
            emphasis: {
              // areaColor: "#184cff",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            type: "map",
            map: "china",
            roam: false,
            zoom: 1.23,
            center: [105, 36],
            // geoIndex: 1,
            // aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                //鼠标没选中
                // areaColor: "#eaeaea", //区域颜色
                borderColor: "#999999",
                borderWidth: 0.5,
              },
              emphasis: {
                //鼠标选中
                areaColor: "#555555",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            data: [
              { name: "北京", selected: false, value: 1 },
              { name: "天津", selected: false, value: 2 },
              { name: "上海", selected: false, value: 3 },
              { name: "重庆", selected: false, value: 4 },
              { name: "河北", selected: false, value: 5 },
              { name: "河南", selected: false, value: 6 },
              { name: "云南", selected: false, value: 7 },
              { name: "辽宁", selected: false, value: 8 },
              { name: "黑龙江", selected: false, value: 9 },
              { name: "湖南", selected: false, value: 10 },
              { name: "安徽", selected: false, value: 11 },
              { name: "山东", selected: false, value: 12 },
              { name: "新疆", selected: false, value: 13 },
              { name: "江苏", selected: false, value: 14 },
              { name: "浙江", selected: false, value: 15 },
              { name: "江西", selected: false, value: 16 },
              { name: "湖北", selected: false, value: 17 },
              { name: "广西", selected: false, value: 18 },
              { name: "甘肃", selected: false, value: 19 },
              { name: "山西", selected: false, value: 20 },
              { name: "内蒙古", selected: false, value: 21 },
              { name: "陕西", selected: false, value: 22 },
              { name: "吉林", selected: false, value: 23 },
              { name: "福建", selected: false, value: 24 },
              { name: "贵州", selected: false, value: 25 },
              { name: "广东", selected: false, value: 26 },
              { name: "青海", selected: false, value: 27 },
              { name: "西藏", selected: false, value: 28 },
              { name: "四川", selected: false, value: 29 },
              { name: "宁夏", selected: false, value: 30 },
              { name: "海南", selected: false, value: 31 },
              { name: "台湾", selected: false, value: 32 },
              { name: "香港", selected: false, value: 33 },
              { name: "澳门", selected: false, value: 34 },
              { name: "南海诸岛", selected: false, value: 35 },
            ], //各省地图颜色数据依赖value
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: dataValue,
            symbolSize: 4,
            tooltip: {
              show: false,
            },
            encode: {
              value: 2,
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
              color: "#ffffff",
              period: 9,
              scale: 5,
            },
            hoverAnimation: true,
            label: {
              show: true,
              fontSize: 8,
              fontWeight: "normal",
              fontFamily: "sans-serif",
              // position: "left",
              distance: 8,
              color: "#ffffff",
              formatter: formatterData,

              // textStyle: {
              //   color: "#000000",
              //   fontSize: 2,
              // },
            },
            itemStyle: {
              color: "#0efacc",
              shadowBlur: 2,
              shadowColor: "#333",
            },
            zlevel: 1,
          },
        ],
        dataRange: {
          x: "-1000 px", //图例横轴位置
          y: "-1000 px", //图例纵轴位置
          splitList: [
            { start: 1, end: 1, label: "北京", color: "#336974" },
            { start: 2, end: 2, label: "天津", color: "#61737b" },
            { start: 3, end: 3, label: "上海", color: "#336974" },
            { start: 4, end: 4, label: "重庆", color: "#195c70" },
            { start: 5, end: 5, label: "河北", color: "#336974" },
            { start: 6, end: 6, label: "河南", color: "#0b4d6a" },
            { start: 7, end: 7, label: "云南", color: "#4c7075" },
            { start: 8, end: 8, label: "辽宁", color: "#4c7075" },
            { start: 9, end: 9, label: "黑龙江", color: "#4c7075" },
            { start: 10, end: 10, label: "湖南", color: "#0b4d6a" },
            { start: 11, end: 11, label: "安徽", color: "#195c70" },
            { start: 12, end: 12, label: "山东", color: "#195c70" },
            { start: 13, end: 13, label: "新疆", color: "#61737b" },
            { start: 14, end: 14, label: "江苏", color: "#15376e" },
            { start: 15, end: 15, label: "浙江", color: "#0b4d6a" },
            { start: 16, end: 16, label: "江西", color: "#195c70" },
            { start: 17, end: 17, label: "湖北", color: "#0b4d6a" },
            { start: 18, end: 18, label: "广西", color: "#336974" },
            { start: 19, end: 19, label: "甘肃", color: "#61737b" },
            { start: 20, end: 20, label: "山西", color: "#4c7075" },
            { start: 21, end: 21, label: "内蒙古", color: "#61737b" },
            { start: 22, end: 22, label: "陕西", color: "#336974" },
            { start: 23, end: 23, label: "吉林", color: "#61737b" },
            { start: 24, end: 24, label: "福建", color: "#336974" },
            { start: 25, end: 25, label: "贵州", color: "#61737b" },
            { start: 26, end: 26, label: "广东", color: "#0b4d6a" },
            { start: 27, end: 27, label: "青海", color: "#74797f" },
            { start: 28, end: 28, label: "西藏", color: "#74797f" },
            { start: 29, end: 29, label: "四川", color: "#195c70" },
            { start: 30, end: 30, label: "宁夏", color: "#61737b" },
            { start: 31, end: 31, label: "海南", color: "#4c7075" },
            { start: 32, end: 32, label: "台湾", color: "#74797f" },
            { start: 33, end: 33, label: "香港", color: "#6d7175" },
            { start: 34, end: 34, label: "澳门", color: "#e0f7cc" },
            { start: 35, end: 35, label: "南海诸岛", color: "#4c7075" },
          ],
        }, //各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；
      };
      this.myEchart.setOption(option);
    },
    dealWithData() {
      var geoCoordMap = {
        新疆: [86.61, 40.79],
        西藏: [89.13, 30.66],
        黑龙江: [128.34, 47.05],
        吉林: [126.32, 43.38],
        辽宁: [123.42, 41.29],
        内蒙古: [112.17, 42.81],
        北京: [116.4, 40.4],
        宁夏: [106.27, 36.76],
        山西: [111.95, 37.65],
        河北: [115.21, 38.44],
        天津: [117.04, 39.52],
        青海: [97.07, 35.62],
        甘肃: [103.82, 36.05],
        山东: [118.01, 36.37],
        陕西: [108.94, 34.46],
        河南: [113.46, 34.25],
        安徽: [117.28, 31.86],
        江苏: [120.26, 32.54],
        上海: [121.46, 31.28],
        四川: [103.36, 30.65],
        湖北: [112.29, 30.98],
        浙江: [120.15, 29.28],
        重庆: [107.51, 29.63],
        湖南: [112.08, 27.79],
        江西: [115.89, 27.97],
        贵州: [106.91, 26.67],
        福建: [118.31, 26.07],
        云南: [101.71, 24.84],
        台湾: [121.01, 23.54],
        广西: [108.67, 23.68],
        广东: [113.98, 22.82],
        海南: [110.03, 19.33],
        澳门: [113.54, 22.19],
        香港: [114.17, 22.32],
      };
      var data = [];
      for (var key in geoCoordMap) {
        data.push({
          name: key,
          value: geoCoordMap[key],
          params: 1111111,
          label: {
            position: "top",
            show: true,
          },
        });
      }
      console.log("data", data);
      return data;
    },
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>
<style lang="scss" scoped>
.div1 {
  width: 100%;
  height: 100%;
}
// .middle {
//   width: 100%;
//   height: 100%;
//   background: url("../../assets/img/11.png") no-repeat;
//   background-size: 100% 100%;
// }
</style>
